<!DOCTYPE html>
<html>
<head>
    <title>$app.topic 权限管理</title>
    #parse("/inc/meta.htm")
</head>
<body id="inner_page_start">
    <div class="modal fade" id="ex-back-big" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h4" id="myExtraLargeModalLabel">角色菜单配置</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post" action="/roles/roleUpdate" id="form-roles-menus">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button onclick="jump()" class="btn btn-primary" id="sub-roles-up">更新</button>
                </div>
            </div>
        </div>
    </div>

#parse("/inc/header.htm")
<div id="wrapper">
    #parse("/inc/menu.htm")
    <div id="content-wrapper">
        <div class="container-fluid">
            <!-- 面包屑-->
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    系统设置
                </li>
                <li class="breadcrumb-item active">权限组</li>
            </ol>
        </div>
        <!-- /.container-fluid class="card mb-3"-->
        <div class="container-fluid" >
            <div class="card-body">
                <form id="list_form" action="/roles/list" method="post">

                    <div class="form-inline">
                        <div class="form-group mx-sm-3">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ex-back-big">新增角色</button>
                        </div>
                    </div>
                    <br/>

                    <div class="row">
                        <div class="col-sm-12 table-outer-box">
                            <table class="table table-bordered dataTable" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
                                <thead>
                                <tr role="row">
                                    <th>权限</th>
                                    <th>名称</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                #foreach( $row in $respData )
                                <tr>
                                    <td>[$!row.role]</td>
                                    <td>$!row.gname</td>
                                    <td>
                                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                          data-gname="$!row.gname" data-target="#ex-back-big" data-uid="$!row.role">编辑</button>
                                        #if($!row.role != 1)
                                        <a class="btn btn-danger btn-sm" href="/groups/del?role=$!row.role" >删除</a>
                                        #end
                                    </td>
                                </tr>
                                #end
                                </tbody>
                            </table>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        #parse("/inc/copyright.htm")
    </div>
    <!-- /.content-wrapper -->
</div>
#parse("/inc/footer.htm")
    <script>
        function jump(){
            $("#form-roles-menus").submit()
        }

        $('#ex-back-big').on('show.bs.modal', function (event) {
            var busy = $("button") ;
            busy.addClass("disabled")
            busy.prop('disabled', true);
            document.getElementById("form-roles-menus").innerHTML = "" ;
            var button = $(event.relatedTarget)
            var uid = button.data('uid')
            var gname = button.data('gname')
            if(!uid && uid != 0) uid = ""
            if(!gname) gname = ""
            tree(uid,gname)
            busy.removeClass("disabled")
            busy.prop('disabled', false);
        })

        function tree(uid,gname) {
            var good = false ;
            $.ajax({
                url: "/roles/jsonTree",
                data: { role:uid },
                type: "POST",
                dataType: "json",
                async: false,
                success: function(data) {
                    if(data.state == "000"){
                        good = true
                        window.extendsData = data
                        var others = data.data["-1"]["child"]
                       // var badmess = $("<div class='form-inline'> <input type='hidden' name='role' value='"+
                       //     uid+"' /> <label>权限名：<input type='text' class='' name='name' value='"+gname+"' /></div>"
                        $("#form-roles-menus").append($("<div class='form-group row'><div class='col-sm-2'></div>" +
                            "<label for='form-name' class='col-sm-2 col-form-label'>权限名：</label> <div class='col-sm-6'>" +
                            "<input type='text' class='form-control' id='form-name' placeholder='权限名' name='name' value='"+
                            gname+"'/> </div> <div class='col-sm-2'><input type='hidden' name='role' value='"+uid+"'/></div></div>")) ;

                        if(others){
                            var othersDiv = $("<div >单独操作权限</div>")
                            $("#form-roles-menus").append(othersDiv) ;
                            for(var other in others){
                                var otherSon = $("<div class='custom-control custom-checkbox custom-control-inline'><input type='checkbox' id='checkbox"+others[other].id+
                                "' name='id' class='custom-control-input' value='"+others[other].id+"'><label class='custom-control-label' for='checkbox"+
                                    others[other].id +"' >"+others[other].name+
                                "</label></div>")
                                $("#form-roles-menus").append(otherSon) ;
                                document.getElementById("checkbox"+others[other].id).checked = others[other].has
                            }
                            $("#form-roles-menus").append($("<hr/>")) ;
                        }
                        var parents = data.data["0"]["child"]  ;
                        if(parents){
                            for (var parent in parents){
                                var othersDiv = $("<div class='custom-control custom-checkbox'><input type='checkbox' id='checkbox"+ parents[parent].id+
                                "' name='id' class='custom-control-input' value='"+ parents[parent].id+"'><label class='custom-control-label' for='checkbox"+
                                    parents[parent].id +"' >"+ parents[parent].name+ "</label></div>")
                                $("#form-roles-menus").append(othersDiv) ;

                                document.getElementById("checkbox"+parents[parent].id).checked = parents[parent].has
                                var len = 0 ;
                                for (var son in parents[parent]["child"]){
                                    var sonDiv = $("<div class='custom-control custom-checkbox custom-control-inline'><input type='checkbox' id='checkbox"+ parents[parent]["child"][son].id+
                                        "' name='id' class='custom-control-input' value='"+ parents[parent]["child"][son].id+"'><label class='custom-control-label' for='checkbox"+
                                        parents[parent]["child"][son].id +"' >"+ parents[parent]["child"][son].name+ "</label></div>")
                                    $("#form-roles-menus").append(sonDiv) ;

                                    document.getElementById("checkbox"+parents[parent]["child"][son].id).checked = parents[parent]["child"][son].has

                                    if(parents[parent]["child"][son].has){
                                        len ++ ;
                                    }
                                    if(len > 0 && len < son+1){
                                        othersDiv.prop('indeterminate', true)
                                    }else if(len == son+1){
                                        if(parents[parent].has)
                                            othersDiv.check = true
                                    }
                                }
                                $("#form-roles-menus").append($("<hr/>")) ;
                            }
                        }
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("网络异常，请稍后重试"+textStatus)
                }
            });

            return good ;
        }
    </script>
</body>
</html>